<template>
  <p>{{state.count}}</p>
  <button @click="changeCount">changeCount</button>
  <hr/>
  <p>{{state.nested.message}}</p>
  <button @click="changeMessage">changeMessage</button>
</template>
<script setup>
import {ref,reactive,shallowReactive} from 'vue';
//当你有一个对象，并且你只想让其顶级属性变成响应式的，
//而不关心其嵌套的响应式的时候就可以shallowReactive
const state = shallowReactive({
    count:0,
    nested:{
        message:'hello'
    }
});
//它就是一个普通的字符串
console.log(state.nested)
const changeCount=()=>state.count++;
const changeMessage=()=>state.nested.message='world';
</script>